<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.v2.jsp"%>
<style>
#jquery-table td {
	cursor: pointer !important;
	word-break: break-all;
	word-wrap: break-word;
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}

a.check {
	margin-bottom: 10px;
}

@media ( min-width : 768px) and (max-width: 1200px) {
	.backup-text {
		width: 100px !important;
	}
}
</style>
</head>
<body class="no-skin">
	<div class="load_bg" style="display: none;"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<div id="test"></div>
		<form id="queryForm">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">选择条件进行查询</h4>

								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>

							<div class=" widget-body">
								<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
								<div class="widget-main" id="condition">
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label"
											style="text-align: right" for="sex">时间:</label>
										<div class="col-sm-8 ">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="startTime"> <span
													class="input-group-addon" style="width: 6px"> <i
													class="fa fa-exchange"></i>
												</span> <input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="endTime">
											</div>
										</div>
									</div>



								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>
					<!-- /.col-sm-12 -->
					<div class="col-md-12 center">
						<div class="clearfix form-actions myaction">

							<button class="btn btn-purple  no-border" type="button"
								name="btn-query" onclick="query_any()">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
								查询
							</button>
							&nbsp;&nbsp;&nbsp;
							<button class="btn btn-grey no-border" type="reset">
								<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i> 重置
							</button>



						</div>
					</div>
				</div>
				<!-- /.row -->

				<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table"
							class="table table-striped table-bordered table-hover">
						</table>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->

			</div>
			<!-- /.page-content-area -->
		</form>
	</div>
	<!-- /.page-content -->

	<!-- 增加修改广告商 -->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" style="margin-left: 15px;">添加广告商</h4>
				</div>
				<div class="modal-body clearfix">
					<div class="row">
						<div class="form-group col-xs-7">
							<label class="col-sm-4 control-label">商户名:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="name"
									id="name-code" style="margin-bottom: 5px">
							</div>

							<label class="col-sm-4 control-label">商户账号:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="userid"
									id="userid-code" style="margin-bottom: 5px">
							</div>

							<label class="col-sm-4 control-label">总金额:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="total"
									id="total-code" style="margin-bottom: 5px">
							</div>
							<label class="col-sm-4 control-label">单价:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="unitPrice"
									id="unitPrice-code" style="margin-bottom: 5px">
							</div>
							<label class="col-sm-4 control-label">余额:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="balance"
									id="balance-code" style="margin-bottom: 5px">
							</div>
							<label class="col-sm-4 control-label">创建时间:</label>
							<div class="input-group col-sm-8">
								<input type="text" data-date-format="yyyy-mm-dd"
									class="date-picker input-sm form-control" id="date-code"
									style="margin-bottom: 5px" name="date">
							</div>
							<label class="col-sm-4 control-label">增加金额:</label>
							<div class="input-group col-sm-8">
								<input type="text" class="form-control" name="addmoney"
									id="addmoney-code" style="margin-bottom: 5px">
							</div>

							<label class="col-sm-4 control-label">URL:</label>
							<div class="input-group col-sm-8">
								<input type="text" class=" col-sm-10" name="url" id="url-code"
									style="margin-bottom: 10px">
								<button class=" btn-primary btn-xs glyphicon glyphicon-plus"
									id="addUrl" style="margin-left: 6px;"></button>
							</div>

						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="change">确认</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.myModal -->

	<div class="modal fade" id="myList">
		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table2"
					class="table table-striped table-bordered table-hover">
				</table>
			</div>
			<!-- /.col -->
		</div>
	</div>


	<%@ include file="/common/common-js.jsp"%>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>

	<script type="text/javascript">
		//接受URL参数，进行文档写入
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return decodeURI(r[2]);
			return null;
		}

		var isAdmin = false;

		//【查询】按钮Click事件
		function query_any() {
			$(".load_bg,.load_img").show();
			if (jqTable != null) {
				jqTable.fnDraw();
			} else {
				loaddata();
				$("#checkAll").on("change",	function() {
							if ($("#checkAll").prop("checked") == true) {
								$('input[name = "id"]:checkbox').prop(
										"checked", true);
							} else {
								$('input[name = "id"]:checkbox').prop(
										"checked", false);
							}
				});

			}
		}

		var jqTable = null;
		var loaddata = function() {
			jQuery(function($) {
				jqTable = $('#jquery-table').dataTable({
									//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
									"columnDefs" : [
											{
												"title" : '时间',
												"targets" : [ 0 ],
												"data" : 'date',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"

											},
											{
												"title" : '广告商',
												"targets" : [ 1 ],
												"data" : "name",
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"
											},

											{
												"title" : '单价',
												"targets" : [ 2 ],
												"data" : 'unitPrice',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"
											},
											{
												"title" : '金额',
												"targets" : [ 3 ],
												"data" : 'total',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"

											},
											{
												"title" : 'PV',
												"targets" : [ 4 ],
												"data" : 'PV',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"
											},
											{
												"title" : 'UV',
												"targets" : [ 5 ],
												"data" : 'UV',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"

											},
											{
												"title" : '所剩余额',
												"targets" : [ 6 ],
												"data" : 'balance',
												"class" : "center",
												"bSortable" : false,
												"width" : "50px"

											},
											{
												"title" : '操作',
												"targets" : [ 7 ],
												"data" : "status",
												"class" : "center",
												"bSortable" : false,
												"width" : "50px",
												"render" : function(value,
														type, row) {
													return " <a class='btn btn-default btn-mylist' data-id="+row.id+">详情</a>&nbsp;"
															+ (isAdmin == true ? "<a class='btn btn-primary btn-change'"+
						  									" data-id='"+row.id+"' data-name='"+row.name+"'"+
						  									" data-unitPrice='"+row.unitPrice+"' data-total='"+row.total+"'"+
						  									" data-balance='"+row.balance+"' data-date='"+row.date+"'"+
						  									" data-url='"+row.url+"' data-userid='"+row.userid+"'"+
						  									">修改</a>"
																	: "");
												}
											}, ],
									"sAjaxSource" : ctx
											+ "/spread/gg_alist.action",
									"fnServerData" : function(sSource, aoData,
											fnCallback) {
										var data = $('#queryForm')
												.serializeObject();
										data.aoData = JSON.stringify(aoData);
										$.ajax({
											"type" : "POST",
											"dataType" : 'json',
											"url" : sSource,
											"data" : data,
											"success" : function(resp) {
												console.log(resp);
												fnCallback(resp);
												initListPage();
											},
											"error" : function(XMLHttpRequest,
													textStatus, errorThrown) {
												alert(textStatus);
											},
											"complete" : function() {
												$(".load_bg,.load_img").hide();
											}
										});
									},

									"sScrollXInner" : "100%",
									"sScrollY" : "100%",//如果不设置，IE会有问题
									"aaSorting" : [ [ 0, "asc" ] ]
								//初始化加载，默认按第几列排序、排序方式（列从0开始计算）
								});
			});
		};

		jQuery(function($) {
			//进入页面就自动查询并渲染列表			
			loaddata();
			$('#jquery-table').delegate('.btn-mylist','click',function() {
						var id = $(this).attr('data-id');
						var url = '/spread/gging.jsp?id=' + id;
						openDialogWithRand(url, 1200, 780, "  查看广告商PV,UV统计详情",
								function(data) {});
				return false;
			});
			$('#jquery-table').delegate('.btn-change','click',function() {
						var id = $(this).attr('data-id');
						var name = $(this).attr('data-name');
						var unitPrice = $(this).attr('data-unitPrice');
						var total = $(this).attr('data-total');
						var balance = $(this).attr('data-balance');
						var date = $(this).attr('data-date');
						var url = $(this).attr('data-url');
						var userid = $(this).attr('data-userid');
						var surl = '/spread/gg_edit.jsp?id=' + id + '&name='
								+ name + '&unitPrice=' + unitPrice + '&total='
								+ total + '&balance=' + balance + '&date='
								+ date + '&url=' + url + '&userid=' + userid;
					
						openDialogWithRand(surl, 900, 540, "修改广告商", function(data) {});
				return false;
			});
			$('.no-skin').delegate('#addAdvertising','click',function() {
							var surl = '/spread/gg_edit.jsp';
							openDialogWithRand(surl, 900, 480, "增加广告商", function(data) {}
							);	
				return false;
			});
			
			$('#total-code').change(function() {
				var balance = $('#balance-code').val();
				var total = $('#total-code').val();
				$('#balance-code').val(Number(balance) + Number(total));
			});
			$.ajax({
				type : "post",
				dataType : "json",
				async : false,
				url : ctx + "/spread/gg_ismanager.action",
				success : function(data) {
					if (data.result.msg == 'false') {
						//非管理员就隐藏部分控件  
					} else {
						isAdmin = true;
						var vad = " <div class='form-group col-xs-12 col-sm-4 col-md-3 col-lg-3 '>"
								+ "<label class='col-sm-4 control-label' for='channel'"
								+ "style='text-align: right;'>广告商:</label>"
								+ "<div class='col-sm-8'>"
								+ "<input type='text' class='form-control' name='name' id='name'> </div></div>  ";
						var vaction = " &nbsp;&nbsp;&nbsp; <a class='btn btn-grey  no-border'"
								+ "data-toggle='modal' id='addAdvertising'> 添加 </a>  ";
						$('.myaction').append(vaction);
						$('#condition').append(vad);
					}
				},
				error : function(XMLHttpRequest, textStatus,errorThrown) {
							alert(textStatus);
				}
			});

			

			//时间显示插件
			$(".date-picker").datepicker({
				autoclose : true,
			}).next().on(ace.click_event, function() {
				$(this).prev().focus();
			});

		});
	</script>

</body>
</html>